<template>
  <fieldset>
    <legend>产品</legend>
    <h1>{{$store.state.Product.tag}}</h1>
    <ul>
      <li v-for="item in products" :key="item.id">
        <span>产品名称：</span>
        <b>{{item.title}}</b>
        ----------
        <span>产品单价：</span>
        <b>{{item.price}}</b>
        ----------
        <span>库存：</span>
        <b>{{item.inventory}}</b>
        ----------
        <button :disabled="item.inventory<=0" @click="add_to_cart(item)">+点击加入购物车</button>
      </li>
    </ul>
  </fieldset>
</template>

<script>
//引入辅助函数
import {mapActions,mapState} from "vuex"
export default {
  mounted(){
    // this.$store.commit('Product/SET_PRODUCT'),
    console.log(this);
    this['Product/FETCH_PRODUCT']()
  },
  computed:{
    //映射product模块中products的状态
    ...mapState("Product",["products"])
  },
  methods: {
    //调用product模块中的action
    ...mapActions(["Product/FETCH_PRODUCT","Cart/GET_PRODUCT"]),
    add_to_cart(item){
      //调用cart模块的action
        this["Cart/GET_PRODUCT"](item)
    }
  }
}
</script>

<style>

</style>